<template>
  <transition
    appear
    name="animate__animated animate__bounce"
    enter-active-class="animate__fadeInRightBig"
    leave-active-class="animate__fadeOutLeftBig"
    ><!-- 也可以写在Listvue中用transition-group包裹 -->
    <li>
      <label>
        <input
          type="checkbox"
          :checked="todo.done"
          @change="handleCheck(todo.id)"
        /><!-- v-model是双向绑定，这里props里的东西不建议,所以用v-bind,虽然用v-model也不会报错，因为传过来的todo是一个对象为引用数据类型，修改对象里的数据不会引起对象在内存中的地址发生变化，所以才不会产生警告，但是不建议这样操作 -->
        <span v-show="todo.isEdit">{{ todo.title }}</span>
        <input
          type="text"
          v-show="!todo.isEdit"
          :value="todo.title"
          @blur="handleBlur($event, todo.id)"
          ref="inputAutoFocus"
        />
      </label>
      <button class="btn btn-danger" @click="handleDelete(todo.id)">
        删除
      </button>
      <button
        v-show="todo.isEdit"
        class="btn btn-edit"
        @click="handleEdit(todo.id)"
      >
        编辑
      </button>
    </li>
  </transition>
</template>

<script>
import "animate.css";
import pubsub from "pubsub-js";
export default {
  name: "ItemVue",
  props: ["todo"],
  methods: {
    //勾选or取消勾选
    handleCheck(id) {
      this.$bus.$emit("checkTodo", id);
    },
    //删除代做事件
    handleDelete(id) {
      if (confirm("确定删除吗")) {
        pubsub.publish("deleteTodo", id);
      }
    },
    //通知app切换是否可编辑
    handleEdit(id) {
      pubsub.publish("editItem", [id]);

      /*  this.$nextTick(() => {
        this.$refs.inputAutoFocus.focus();//定时器，updated钩子,$nextTick都可以解决,但$nextTick对于消息与订阅不起作用
      }); */

      /*
      ## nextTick

      1. 语法：```this.$nextTick(回调函数)```回调函数无论普通函数还是箭头函数里面的this都是vc
      2. 作用：在下一次 DOM 更新结束后执行其指定的回调。
      3. 什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。 
       */
    },
    handleBlur(e, id) {
      pubsub.publish("editItem", [id, e.target.value]);
    },
  },
  updated() {
    this.$refs.inputAutoFocus.focus();
  },
};
</script>

<style scoped>
/*item*/
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
  cursor: pointer;
}

li label {
  float: left;
  cursor: pointer;
}

li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

li button {
  float: right;
  display: none;
  margin-top: 3px;
}

li:before {
  content: initial;
}

li:last-child {
  border-bottom: none;
}
li:hover {
  background-color: aqua;
}
li:hover button {
  display: block;
}
</style>